<template>
   <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="nav-left">
        <!-- 如果需要返回按钮可以放这里 -->
      </view>
      <view class="nav-title">个人信息</view>
      <view class="nav-right">
        <!-- 导航栏右侧可以留空或放其他按钮 -->
      </view>
    </view>

    <!-- 个人信息内容区 -->
    <view class="content">
      <view class="user-info-card">
        <view class="user-avatar">
          <image src="/static/user-avatar.png" mode="aspectFill"></image>
        </view>
        <view class="user-detail">
			<view class="primary-info">
			  <text class="label">用户名:</text>
			  <text class="value">{{ patientInfo.username }}</text>
			</view>
          <!-- 主要信息（住院号） -->
          <view class="primary-info" style="border-top: 1rpx solid #f0f0f0;padding-top: 20px;">
            <text class="label">住院号:</text>
            <text class="value">{{ patientInfo.hospitalNumber || '暂无' }}</text>
          </view>
          
          <!-- 次要信息（性别、年龄） -->
          <view class="secondary-info">
            <view class="info-row">
              <view class="info-item">
                <text class="label">性别:</text>
                <text class="value">{{ formatGender(patientInfo.gender) }}</text>
              </view>
              <view class="info-item">
                <text class="label">年龄:</text>
                <text class="value">{{ patientInfo.age || '未知' }} 岁</text>
              </view>
            </view>
          </view>
        </view>
      </view>
	  <view class="changeInfo-box" @click="toChangeInfoPage">
		  <view class="changeInfo-box-inner">
		  	<view>修改个人信息</view>
		  	<view>></view>
		  </view>
	  </view>
      
      <!-- 修改为微信风格的登出按钮 -->
      <view class="logout-box" @click="logout">
        <view class="logout-box-inner">
          <view class="logout-text">退出登录</view>
          <view>></view>
        </view>
      </view>
	  	
	  </view>
    </view>
</template>

<script>
import config from '../../config.js';

export default {
  data() {
    return {
      patientInfo: {
		username: uni.getStorageSync("username"),
        hospitalNumber: uni.getStorageSync("hospitalNumber"),
        gender: uni.getStorageSync("gender"),
        age: uni.getStorageSync("age")
      }
    };
  },
  methods: {
	toChangeInfoPage(){
		uni.navigateTo({
		    url: '/pages/changePersonalInfo/changePersonalInfo'
		});
	},
    // 登出功能
    async logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 尝试删除会话
              const sessionId = uni.getStorageSync('qaSessionId');
              if (sessionId != '') {
                await uni.request({
                  url: `${config.baseUrl}/smartqa/deleteSession`,
                  method: 'POST',
                  header: {
                    'Content-Type': 'application/json',
                    'Authorization': uni.getStorageSync('token') || ''
                  },
                  data: {
                    sessionId: sessionId
                  }
                });
              }
              
              // 清除本地存储
              uni.removeStorageSync('qaSessionId');
              uni.removeStorageSync('token');
              uni.removeStorageSync('hospitalNumber');
              uni.removeStorageSync('access');
              uni.removeStorageSync('authority');
              console.log("clrae storage")
              // 返回登录页
              uni.reLaunch({
                url: '/pages/login/login'
              });
            } catch (error) {
              console.error('登出失败', error);
              uni.showToast({
                title: '登出过程中发生错误',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    // 性别格式化
    formatGender(gender) {
      return gender === '男' || gender === '女' ? gender : '未知';
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 新增自定义导航栏样式 */
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #1677ff;
  color: #fff;
  padding: 0 16px;
  position: relative;
  z-index: 1000; /* 确保导航栏在最上层 */
}

.nav-left, .nav-right {
  width: 80px;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
}

/* 内容区 */
.content {
  padding: 20rpx;
  flex: 1;
}

/* 个人信息卡片 - 高度调整为原来1.3倍 */
.user-info-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx; /* 增加垂直padding */
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

/* 头像 - 调整为原来1.3倍 */
.user-avatar {
  width: 156rpx; /* 120rpx * 1.3 */
  height: 156rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 26rpx; /* 20rpx * 1.3 */
  border: 2rpx solid #e0f0ff;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.user-detail {
  flex: 1;
}

/* 主要信息样式 - 住院号 */
.primary-info {
  margin-bottom: 40rpx;
}

.primary-info .label {
  font-size: 40rpx; /* 略大于次要信息标签 */
  color: #666;
  margin-right: 10rpx;
}

.primary-info .value {
  font-size: 40rpx; /* 增大字体 */
  font-weight: bold; /* 加粗 */
  color: #333;
  letter-spacing: 1rpx;
}

/* 次要信息样式 - 性别和年龄 */
.secondary-info {
  padding-top: 32rpx;
  border-top: 1rpx solid #f0f0f0;
}

.info-row {
  display: flex;
  justify-content: space-between;
}

.info-item {
  display: flex;
  align-items: center;
}
.changeInfo-box{
	display: flex;
	align-items: center;
	background-color: white;
	height: 100rpx;
}
.changeInfo-box-inner{
	display: flex;
	align-items: center;
	padding: 30rpx;
	justify-content: space-between;
	width: 100%;
}

.secondary-info .label {
  font-size: 36rpx; /* 与住院号标签统一 */
  color: #666;
  margin-right: 10rpx;
}

.secondary-info .value {
  font-size: 36rpx; /* 比住院号小，但比原来大 */
  color: #333;
  font-weight: normal; /* 不加粗 */
}

/* 新增微信风格登出按钮样式 */
.logout-box {
  display: flex;
  align-items: center;
  background-color: white;
  height: 100rpx;
  margin-top: 20rpx;
}

.logout-box-inner {
  display: flex;
  align-items: center;
  padding: 30rpx;
  justify-content: space-between;
  width: 100%;
}

.logout-text {
  color: #f44336;
  font-size: 32rpx;
}

/* 移除原有的浮动按钮样式 */
/* .floating-logout-btn {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  background-color: #1677ff;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  z-index: 999;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180rpx;
} */

/* 确保内容不会被按钮遮挡 */
.content {
  padding-bottom: 20rpx; /* 调整为更小的值，因为不再需要为浮动按钮留空间 */
}
</style>